import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { DualAxes } from '@ant-design/plots';
import { Card, Radio } from 'antd';
import { effRateMV } from '../services';

const Currency = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    asyncFetch(7);
  }, []);

  // 获取图表数据
  const asyncFetch = async (amount: number) => {
    let data = await effRateMV({ amount: amount })
    console.log(data);
    if (data) {
      setData(data.body)
    }
  };
  // 时间选择
  const showInfo = (e: any) => {
    console.log(Number(e.target.value));

    asyncFetch(Number(e.target.value))
  }
  const config = {
    data: [data, data],
    height: 240,
    xField: 'date',
    yField: ['ccyQty', 'velOfCirc'],
    yAxis: {
      ccyQty: {
        title: {
          text: 'HPC',
          spacing: 6
        },
      },

    },
    meta: {
      ccyQty: {
        alias: '投放量',
      },
      velOfCirc: {
        alias: '流通速度'
      }
    },
    legend: {
      layout: 'horizontal',
      position: 'top'
    },
    geometryOptions: [
      {
        geometry: 'column',
      },
      {
        geometry: 'line',
        lineStyle: {
          lineWidth: 2,
        },
      },
    ],
  };
  return <Card bodyStyle={{ padding: '4px 24px 24px' }}>
    <div className="rangeTimeSelect">
      <p className="formTitle">货币发行与流通</p>
      <Radio.Group
        defaultValue="7"
        buttonStyle="solid"
        onChange={showInfo}
      >
        <Radio.Button value="7">近七天</Radio.Button>
        <Radio.Button value="30">近30天</Radio.Button>
      </Radio.Group>
    </div><DualAxes {...config} />
  </Card>
}

export default Currency